<template>
  <div class="header">
    <h1>{{title}}</h1>
    <i v-if="showBack" @click="back" class="cubeic-back"></i>
    <div class="extend">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
      required: true
    },
    showBack: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    back () {
      this.$router.back()
    }
  }

}

</script>
<style lang="stylus" scoped>
.header
  position relative
  height 44px
  line-height 44px
  text-align center
  h1
  color #999
  .cubeic-back
    position absolute
    left 0
    top 0
    padding 0 10px
  .extend
    position absolute
    right 0
    top 0
    padding 0 10px
</style>
